<template>
  <view
    class="min-h-screen flex flex-col items-center justify-center bg-gray-50 p-6"
  >
    <!-- 顶部图标 -->
    <view
      class="w-[100rpx] h-[100rpx] bg-green-100 rounded-full flex items-center justify-center mb-8"
    >
      <view
        class="w-[100rpx] h-[100rpx] bg rounded-full flex items-center justify-center"
      >
        <image
          src="/static/logo.jpg"
          mode="widthFix"
          class="w-[100px] h-[100px]"
        />
      </view>
    </view>

    <!-- 标题和描述 -->
    <view class="text-center mb-12">
      <view class="text-3xl font-bold text-c2 mb-2">支付成功</view>
      <view class="text-c3 text-lg">您已经完成支付</view>
    </view>

    <!-- 确认按钮 -->
    <view class="w-full max-w-md">
      <button
        class="w-full py-1 bg rounded-lg text-white text-xl font-medium shadow-md"
        @click="handleConfirm"
      >
        知道了
      </button>
    </view>
  </view>
</template>

<script setup lang="ts">
// 处理确认按钮点击事件
const handleConfirm = () => {
  // 这里可以添加支付成功后的逻辑，比如返回首页
  uni.navigateBack()
}
</script>

<style scoped lang="scss">
/* 可以添加自定义样式，UnoCSS不覆盖的部分 */
</style>
